<template>
  <div class="listWrap">
    <a-tabs tabPosition="left" v-model="activeKey">
      <a-tab-pane :key="item.id" :tab="item.name" v-for="(item, index) in tabsList">
        <div class="listWrap_button" v-if="item.id != 'new'">
          <div class="listWrap_button_left">
            <span>自动回显：</span>
            <a-switch
              v-model="$store.state.formJson.formObj.LIST[item.id].auto"
              checked-children="开"
              un-checked-children="关"
            />
          </div>
          <div>
            <a-popconfirm title="确认删除该项配置？" ok-text="确认" cancel-text="取消" @confirm="deletePane(item.id)">
              <a-button class="listWrap_button_delete" type="danger" icon="delete">删除</a-button>
            </a-popconfirm>
            <a-button type="primary" @click="savePane(item.id)" icon="save">保存</a-button>
          </div>
        </div>
        <div class="listWrap_button" v-else>
          <div class="listWrap_button_left">
            <span>自动回显：</span>
            <a-switch v-model="auto" checked-children="开" un-checked-children="关" />
          </div>
          <a-button type="primary" @click="savePane(item.id)" icon="save">保存</a-button>
        </div>
        <ListPaneItem :ref="'paneItem' + index" :type="item.id"></ListPaneItem>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeKey: 'new', // tabs标签绑定值
      tabsList: [
        // tabs标签列表
        {
          id: 'new',
          name: 'new'
        }
      ],
      auto: false // 自动回显绑定值
    }
  },
  components: {
    ListPaneItem: () => import('@/views/businessAssembly/jsonComponent/listPaneItem.vue')
  },
  mounted() {
    for (let key in this.$store.state.formJson.formObj.LIST) {
      this.tabsList.push({
        id: key,
        name: key
      })
    }
  },
  methods: {
    // 保存
    savePane() {
      let index
      this.tabsList.some((v, i) => {
        if (v.id == this.activeKey) {
          index = i
        }
      })
      let attrForm = this.$refs['paneItem' + index][0].attrForm
      if (!attrForm.apltable) {
        this.$message.warning('请选择申请表！')
        return
      }
      if (!attrForm.table && !attrForm.yjctable) {
        this.$message.warning('请选择企业表或申请表！')
        return
      }
      let key = attrForm.apltable.toUpperCase()
      let toolObj = {}
      this.tabsList.forEach(v => {
        if (v.id != this.activeKey) {
          toolObj[v.id] = v.id
        }
      })
      if (key in toolObj) {
        this.$message.warning('重复的申请表！')
        return
      }
      let tempObj = {
        attrForm: attrForm,
        filedList: this.$refs['paneItem' + index][0].filedList,
        auto:
          this.activeKey == 'new'
            ? this.auto
            : this.activeKey == key
            ? this.$store.state.formJson.formObj.LIST[key].auto
            : this.$store.state.formJson.formObj.LIST[this.activeKey].auto
      }
      this.$set(this.$store.state.formJson.formObj.LIST, key, tempObj)
      if (this.activeKey == 'new') {
        this.$store.state.formJson.formObj.LIST[key].auto = this.auto
        this.$refs['paneItem' + index][0].attrForm = {
          apltable: '',
          table: '',
          title: '列表模态框',
          type: 'single',
          yjctable: '',
          lookname: '',
          tname: '',
          ischoice: 'false',
          ismultiple: undefined,
          isaddbtn: 'false',
          params: {},
          paramsList: [],
          filter: {},
          fiterList: []
        }
        this.$refs['paneItem' + index][0].filedList = []
        this.auto = false
        this.tabsList.push({
          id: key,
          name: key
        })
      } else if (this.activeKey == key) {
      } else {
        delete this.$store.state.formJson.formObj.LIST[this.activeKey]
        this.tabsList.splice(index, 1, { id: key, name: key })
      }
      this.activeKey = key
      this.$message.success('保存成功！')
    },
    // 删除
    deletePane() {
      let index
      this.tabsList.some((v, i) => {
        if (v.id == this.activeKey) {
          index = i
        }
      })
      delete this.$store.state.formJson.formObj.LIST[this.activeKey]
      this.tabsList.splice(index, 1)
      this.activeKey = 'new'
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-tabs-left-bar {
  width: 120px;
}

.listWrap_button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.listWrap_button_left {
  display: flex;
  align-items: center;
}

.listWrap_button_delete {
  margin-right: 10px;
}

.listWrap_tabs {
  margin-top: 20px;
}

.listWrap_new {
  text-align: right;
}
</style>
